<template>
	<view class="page-cont">
		<navbar title="消息列表"></navbar>
		<scroll-view class="main-cont" :style="{height: pageHeight}" scroll-y refresher-enabled :refresher-triggered="isRefresh" @refresherrefresh="handlePullDownRefresh"
			@scrolltolower="handleReachBottom">
			<!-- tab栏 -->
			<tab :tabActive="tabActive" :tabs="tabs" :badges="badges" @tabChange="handleTabChange"></tab>
			<!-- 列表 -->
			<view class="list">
				<view class="list-item" v-for="(item, index) in dataList" :key="index">
					<view class="list-item-top">
						<view class="list-item-title">{{item.title}}</view>
						<view class="list-item-time">{{item.createDate}}</view>
					</view>
					<view class="list-item-content">{{item.content}}</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>
<script setup lang="ts">
	import { reactive, ref, computed, watch } from 'vue';
	import { onShow, onLoad, onPullDownRefresh, onReachBottom } from "@dcloudio/uni-app";
	import { getMessage } from "@/api/login.js";
	import { useNavbar } from "@/utils/hooks.js";
	const { pageHeight } = useNavbar();
	const tabs = ref(["未读消息", "已读消息"]);
	const badges = ref([]);
	const tabActive = ref(0);
	const isRefresh = ref(false)
	const dataList = ref([])
	const page = reactive({
		pageNum: 1,
		pageSize: 10,
		total: 0,
		status: 0, //0未读，1已读
	});

	onLoad(() => {
		getList();
	});

	// 获取列表数据
	function getList() {
		let params = {
			pageNum: page.pageNum,
			pageSize: page.pageSize,
			status: tabActive.value
		};
		getMessage(params).then(res => {
			isRefresh.value = false;
			let pageData = res.pageData || {};
			page.total = pageData.total || 0;
			if (page.pageNum == 1) {
				dataList.value = pageData.list || [];
			} else {
				dataList.value = dataList.value.concat(pageData.list || []);
			}
			if (tabActive.value == 0 && dataList.value.length) {
				// 未读消息
				badges.value = [0];
			}
		});
	}

	// 下拉刷新
	const handlePullDownRefresh = () => {
		isRefresh.value = true;
		page.pageNum = 1;
		getList();
	}

	// 上拉加载更多
	const handleReachBottom = () => {
		if (page.pageNum * page.pageSize < page.total) {
			page.pageNum++;
			getList();
		}
	}

	// tab切换
	function handleTabChange(e) {
		tabActive.value = e;
		page.pageNum = 1;
		getList();
	}
</script>
<style lang="scss" scoped>
	.page-cont {
		.main-cont {
			overflow: hidden;
			overflow-y: auto;
		}

		.list {
			padding: 10px;

			.list-item {
				margin-top: 10px;
				border-radius: 5px;
				background-color: #fff;

				&:first-child {
					margin-top: 0;
				}
			}

			.list-item-top {
				padding: 6px 10px;
				display: flex;
				justify-content: space-between;
				align-items: center;
				background-color: #EFF1F7;
			}

			.list-item-title {
				color: #333;
				font-size: 13px;
				font-weight: 600;
			}

			.list-item-time {
				color: #666;
				font-size: 13px;
			}

			.list-item-content {
				padding: 10px;
				color: #333;
				font-size: 12px;
				background-color: #fff;
			}
		}
	}
</style>